<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1 v-show="person.name">姓名：{{ person.name }}</h1>
  <h1>年龄：{{ person.age }}</h1>
  <h1 v-show="person.sex ">性别：{{ person.sex }}</h1>
  <h1>工作类型：{{ person.job.type }}</h1>
  <h1>工作薪水：{{ person.job.salary }}</h1>
  <h1>爱好：{{ person.hobby }}</h1>
  <h1>测试数据c：{{ person.job.a.b.c }}</h1>
  <button @click="changeInfo">修改个人信息</button>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="delName">删除一个name属性</button>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'App',
  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: 'web工程师',
        salary: '30K',
        a: {
          b: {
            c: 666
          }
        }
      },
      hobby:['抽烟', '喝酒', '烫头']
    })
    // 方法
    function changeInfo() {
      person.name = "里斯",
      person.age = 20
      person.job.type = 'java工程师',
      person.job.salary = '45K'
      person.job.a.b.c = 999
      person.hobby[0] = '纹身'
    }
    // 添加sex属性
    function addSex(){
      person.sex = '女'
    }
    // 删除name属性
    function delName(){
      delete person.name
    }
    // 返回一个对象
    return {
      person,
      changeInfo,
      addSex,
      delName
    }
  },
}
</script>

<style></style>
